<template>
  <div class="top-detail">
    <Header :title="topName" go-back="true"></Header>
    <back-top></back-top>
    <div class="top-box">
      <div class="top-header">
        <img :src="topCover" alt="">
        <div class="top-name">
          <h3>{{topName}}</h3>
          <h4>
            <img src="../../../assets/Image/wylogo.png" alt="">
            网易云音乐
            <span>最近更新：{{topTime | dateFmt}}</span>
          </h4>
          <p>{{topDesc}}</p>
        </div>
      </div>
      <div class="list-song">
        <ul>
          <li v-for="(song,sindex) in arrList" :key="sindex" @click="goSongPlay(song.id, song.name, song.ar[0].name, song.al.picUrl)">
            <div class="num">{{sindex+1}}</div>
            <div class="song-name">
              <span>{{song.name}}</span>
            </div>
            <div class="singer-name">
              <span>{{song.ar[0].name}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import BackTop from '../../backtop/src/main'
import {rankingList} from '../../../api/node'
import {saveSongUrl, saveSongId, saveSingerName, saveSongName} from '../../../api/storage'

export default {
  name: 'TopDetail',
  data () {
    return {
      topName: '', // 排行榜名称
      topDesc: '', // 排行榜描述
      topCover: '', // 排行榜图片
      topTime: '', // 排行榜更新时间
      arrList: []
    }
  },
  created () {
    rankingList(this.$route.params.id).then(res => {
      if (res.code === 200) {
        this.topName = res.playlist.name
        this.topDesc = res.playlist.description
        this.topCover = res.playlist.coverImgUrl
        this.topTime = res.playlist.updateTime
        this.arrList = res.playlist.tracks
        // console.log(this.arrList)
      }
    })
  },
  methods: {
    goSongPlay (id, sname, name, url) {
      saveSongUrl(url)
      saveSongName(sname)
      saveSingerName(name)
      saveSongId(id)
      this.$router.push('/songPlay2')
    }
  },
  components: {
    Header,
    BackTop
  }
}
</script>

<style lang="scss" scoped>
.top-detail{
  width: 100%;
  padding-top: 50px;
  .top-box{
    width: 100%;
    .top-header{
      width: 100%;
      padding: 5px;
      display: flex;
      align-items: center;
      background: #f2f2f2;
      img{
        width: 100px;
        height: 100px;
      }
      .top-name{
        margin-left: 10px;
        h3{
          font-size: 18px;
          line-height: 30px;
        }
        h4{
          display: flex;
          img{
            width: 20px;
            height: 20px;
          }
          font-size: 12px;
          font-weight: normal;
          span{
            margin-left: 20px;
          }
        }
        p{
          width: 250px;
          font-size: 14px;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .list-song{
      width: 100%;
      padding: 5px;
      ul{
        li{
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          border-bottom: 1px solid #f2f2f2;
          .song-name{
            width: 60%;
            font-size: 14px;
            text-align: center;
          }
          .num{
            width: 10%;
            text-align: center;
            font-size: 14px;
          }
          .singer-name{
            width: 30%;
            text-align: center;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
